<template>
    <a-modal
      :visible="visible"
      title="选择账号"
      centered
      @cancel="handleCancel"
      @ok="confirmChoose"
      :width="600"
      :body-style="{
        padding: '16px',
        minHeight: '500px',
      }"
    >
    
    <div  class="list-wrapper">
      <div class="list-left">
          <div class="tab-item" :class="tab.key==current_group_id?'tab-active':''" @click="tabChange(tab.key)" v-for="tab in group_account_List" :key="tab.key">
            <img :src="tab.image" class="tab-img" alt="">
          <span>{{ tab.value }}</span>
          </div>
      </div>
      <div class="account-list hide-scroller-bar" v-if="tab_under_list.length">
      <div class="accout-item" >
        <a-checkbox  @change="allCheckedChange" :checked="isCheckedAll()">全选</a-checkbox>
      </div>
      <div class="accout-item" v-for="item in tab_under_list" :key="item.id">
        <label class="account-lable-item" :for="'account-checkbox-' + item.id">
        <a-checkbox :id="'account-checkbox-' + item.id" :checked="isChecked(item.id)" @change="checkedChange(item.id)">
        </a-checkbox>
        <img :src="item.avatar" class="account-avatar">
        <span>{{ item.nickname }}</span>
        </label>
      </div>
    </div>
    <div v-else class="account-list-empty">
            <a-empty>
                <template #description>
                  <span>暂无账号</span>
                  <span style="color: rgb(255, 101, 98);cursor: pointer;margin-left: 5px;" @click="openPage">点击创建</span>
                </template>
            </a-empty>
        </div>
    </div>
    
   
    </a-modal>
  </template>
  
  <script>
  import {
    defineComponent,
    reactive,
    toRefs,
    computed,
    watch,
    toRaw,
    h,
    onBeforeUnmount,
    createVNode,
  } from "vue";
  import request from "../../common/utils/request";
  import store from "../../store/index";
  import { useRoute, useRouter } from "vue-router";
  import utils from "../../common/utils/utils";
  import { Modal, notification, message } from "ant-design-vue";
  import {
    PlusOutlined,
    ExclamationCircleOutlined,
    CloseCircleFilled,
  } from "@ant-design/icons-vue";
  import _ from 'lodash';
  export default defineComponent({
    name: "AddTeam",
    components: {},
    props: {
      visible: {
        type: Boolean,
        default: false,
      },
      
      account:{//回显的账号信息
        type:Array,
        default:()=>null
      },
      group_id:{//回显分组信息
        type:[String,Number,],
        default:''
      },
    },
  
    setup(props, context) {
      const route = useRoute();
      const router = useRouter();
      const state = reactive({
        group_account_List:[],//原始数据 带分组的list
        group_account_obj:{},//映射的账号信息
        current_group_id:'',//当前分组id
      });
      const confirmChoose = ()=>{
      
        context.emit("handleOk", _.cloneDeep(state.group_account_obj));
      }
      const tabChange = (key)=>{
        state.current_group_id = key;
      }
      // 回显的账号ids
      const accountIds = computed(()=>{
        return list.map(item=>item.id)
      })
      // 获取分组下账号是否全选了
      const isCheckedAll = ()=>{
        let obj =  state.group_account_obj[state.current_group_id]
        return  obj&&obj.checkedAccountIds.length==obj.children.length?true:false
      }
      // 当前账号是否被选中
      const isChecked = (id)=>{
        let obj =  state.group_account_obj[state.current_group_id]
        return  obj&&obj.checkedAccountIds.includes(id)?true:false
      }
      const handleCancel = () => {
        context.emit("onClose");
      };
  
     
      // 获取分组信息
      const getList = ()=>{
            request.get("/work_ai", "/org/platform/account/group/list", {}).then((res) => {
              res.result.map(item=>{
                item.sub.map(t=>{
                  t.data = {
                    title:'',
                    cover_img:'',
                    is_private:0,
                    fix_at:'',
                    publishType:1
                  }
                })
              })
                state.group_account_List = res.result
                // 初次加载 选中账号回显处理
                if(props.account){
                  
                  state.group_account_obj = _.cloneDeep(props.account)
                }else{
                    res.result.map(item=>{
                    state.group_account_obj[item.key] = {
                      children:item.sub,
                      checkedAccountIds:[],
                      current_account_id:'',
                      image:item.image,
                    }
                  })
                }
                
               
                // 初次加载 选中分组 回显处理
                if(state.group_account_List.length&&!props.group_id){
                  state.current_group_id =  state.group_account_List[0].key
                }else{
                  state.current_group_id = props.group_id
                }

                

            });
      }

      // 当前分组下的账号列表
      const tab_under_list = computed(()=>{
        return state.group_account_List.find(item=>item.key==state.current_group_id)?state.group_account_List.find(item=>item.key==state.current_group_id)?.sub??[]:[]
      })

      // 当前分组下账号是否全选
      const allCheckedChange = (e)=>{
        let currentAccountList =  state.group_account_obj[state.current_group_id]
       if(e.target.checked){
        currentAccountList.checkedAccountIds =  currentAccountList.children.map(item=>item.id) 
       }else{
        currentAccountList.checkedAccountIds = []
       }
     }
      // 选中或取消 账号 
     const checkedChange = (id)=>{
      let currentAccountList =  state.group_account_obj[state.current_group_id]
      let isHasId = currentAccountList.checkedAccountIds.includes(id)
      
      if(isHasId){
        currentAccountList.checkedAccountIds.splice(currentAccountList.checkedAccountIds.indexOf(id),1);
      }else{
        currentAccountList.checkedAccountIds.push(id);
      }

     }
      watch(()=>props.visible,(newVal)=>{
        newVal&&getList()
      })
      
      return {
        ...toRefs(state),
        tabChange,
      
        handleCancel,
        tab_under_list,
        isCheckedAll,
        allCheckedChange,
        isChecked,
        checkedChange,
        confirmChoose,
      };
    },
  });
  </script>
  
  <style lang="less" scoped>
   .list-wrapper{
      display: flex;

      height: 450px;
    }
    .list-left{
      flex-shrink: 0;
      width: 199px;
      border-right: 1px solid #e5e5e5;
    }
    .tab-item{
      display: flex;
      justify-content: center;
      align-items: center;
      height: 45px;
   
      cursor: pointer;
      font-size: 14px;
      color: #333;
      font-weight: 500;
      padding: 0 10px;
      height: 50px;
    }
    .tab-active{
      background-color: #e7e5f3;
    }
    .tab-img{
      width: 30px;
      height: 30px;
      border-radius: 50%;
      object-fit: contain;
      margin-right: 10px;
    }
    .active-account{
      border:1px solid red;
    }
    .accout-item{
      display: flex;
      align-items: center;
      height: 60px;
      border-bottom: 1px solid #eee;
      
    }
    .account-lable-item{
      cursor: pointer;
    }
    .account-avatar{
      width: 24px;
      height: 24px;
      border-radius: 50%;
      overflow: hidden;
      margin: 0 5px;
      object-fit: contain;
    }
    .choose-list{
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }
    .choose-item{
      position: relative;
      display: flex;
      align-items: center;
      margin: 5px;
    }
    .choose-item:hover .choose-item-close{
      visibility: visible!important;
    }
    .account-avatar-wrapper{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 36px;
      height: 36px;
      border: 1px solid #e5e5e5;
      border-radius: 50%;
    }
    .choose-item-close{
      position: absolute;
      right: -10px;
      top: -10px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      visibility: hidden;
    }
    .left-item{
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 15px 0;
      padding: 10px 0;
      
      cursor: pointer;
      .choose-item-close{
      position: absolute;
      right: 15px;
      top: 0px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      visibility: hidden;
      }
     
      &:hover .choose-item-close{
        visibility: visible!important;
      }
      &:hover .choose-item-close{
        visibility: visible!important;
      }
    }
    .active_memory_tab:hover .choose-item-close{
      background-color: #e7e5f3;
    }
    .active_memory_tab{
        background-color: #e7e5f3!important;
      }
    .left-item-img{
      width: 40px;
      height: 40px;
      object-fit: contain;
    }
    .account-list{
      height: 450px;
      width: calc(100% - 200px);
      width: 100%;
      overflow-y: auto;
      margin-left: 20px;
    }
    .account-list-empty{
      width: 100%;
      height: 450px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .list-wrapper{
      display: flex;

      height: 450px;
    }
    .list-left{
      flex-shrink: 0;
      width: 199px;
      border-right: 1px solid #e5e5e5;
    }
    .tab-item{
      display: flex;
      justify-content: center;
      align-items: center;
      height: 45px;
   
      cursor: pointer;
      font-size: 14px;
      color: #333;
      font-weight: 500;
      padding: 0 10px;
      height: 50px;
    }
    .tab-active{
      background-color: #e7e5f3;
    }
    .tab-img{
      width: 30px;
      height: 30px;
      border-radius: 50%;
      object-fit: contain;
      margin-right: 10px;
    }
    .active-account{
      border:1px solid red;
    }
  </style>
  